<template>
    <div>
      <bread-crumb></bread-crumb>
      <el-row>
        <el-form class="demo-form-inline" label-width="80px">
          <el-col :span="8">
            <el-form-item label="用户昵称">
              <el-input placeholder="请输入用户昵称" v-model="query.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="留言标题">
              <el-input placeholder="请输入标题" v-model="query.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="queryList(query)"><i class="fa fa-search" aria-hidden="true"></i> 查询
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div style="text-align: left">
        <el-button-group>
          <el-button type="primary" style="width: 100px" icon="el-icon-plus" @click="dialog1.dialogFormVisible = true">添加</el-button>
          <el-button type="warning" style="width: 100px" icon="el-icon-edit">修改</el-button>
          <el-button type="danger" style="width: 100px" icon="el-icon-delete"@click="deleteTableData">删除</el-button>
        </el-button-group>
      </div>
      <div id="showTable">
        <el-table
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          :data="list.slice((currpage - 1) * pagesize, currpage * pagesize)"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="m_username"
            label="用户昵称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="m_title"
            label="留言标题"
            width="180">
          </el-table-column>
          <el-table-column
            prop="m_content"
            label="留言内容">
          </el-table-column>
          <el-table-column
            prop="m_date"
            label="留言日期">
          </el-table-column>
          <el-table-column
            prop="isUsed"
            label="是否启用">
            <template slot-scope="scope">
              <i class="fa" :class="scope.row.isUsed|changeBoolTag"></i>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px; text-align :left">
          <el-button @click="toggleSelection(list)" size="mini">全选</el-button>
          <el-button @click="toggleSelection()" size="mini">取消选择</el-button>
        </div>
        <el-pagination
          background
          :current-page="currpage"
          layout="prev, pager, next, sizes, total, jumper"
          :page-sizes="[3,6,10,15]"
          :page-size="pagesize"
          :total="list.length"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
      <el-dialog title="添加留言" :visible.sync="dialog1.dialogFormVisible">
        <div slot="footer" class="dialog-footer">
          <el-form ref="form" label-width="80px">
            <el-form-item label="用户名称">
              <el-input v-model="dialog1.message.name" ></el-input>
            </el-form-item>
            <el-form-item label="留言标题">
              <el-input v-model="dialog1.message.title" ></el-input>
            </el-form-item>
            <el-form-item label="留言内容">
              <el-input v-model="dialog1.message.content" ></el-input>
            </el-form-item>
            <el-form-item label="留言日期">
              <el-input v-model="dialog1.message.date" ></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
              <el-switch v-model="dialog1.message.isUsed"></el-switch>
            </el-form-item>
            <el-button @click="dialog1.dialogFormVisible = false">取 消</el-button>
            <el-button type="primary">确 定</el-button>
          </el-form>
        </div>
      </el-dialog>
    </div>

</template>

<script>
  import BreadCrumb from '../../components/ Breadcrumb/indexBreadcrumd'
    export default {
        name: "message",
      data:function () {
          return{
            list:[],
            username:'',
            query:{
              username:'',
              title:''
            },
            title:'',
            pagesize: 2,
            currpage: 1,
            multipleSelection: [],
            dialog1: {
              dialogFormVisible:false,
              message:{
                name:'',
                title:'',
                content:'',
                date:'',
                isUsed:''
              }
            }
          }
      },
      components:{
          BreadCrumb
      },
      mounted() {
        let _this=this;
        _this.axios({
          url: 'http://localhost:3000/api/message/message',
          method:'get'
        }).then(function (res) {
          _this.list = res.data.data;
        })
      },
      methods:{
        queryList:function (query) {
          let _this=this;
          this.axios({
            url:'http://localhost:3000/api/message/query',
            method:'get',
            params:{
              username:this.query.username,
              title:this.query.title
            }
          }).then(function (res) {
            _this.list=res.data.data;
          })
        },
        handleCurrentChange(cpage) {
          this.currpage = cpage;
        },
        handleSizeChange(psize) {
          this.pagesize = psize;
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;

        },
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },deleteTableData: function () {
          var selected = this.multipleSelection;
          var _this = this;
          selected.forEach(function (item1, index, array) {
            _this.list.forEach(function (item2, index, array) {
              if (item1 == item2) {
                array.splice(index, 1);
              }
            })
          })
        },
      }
    }
</script>

<style scoped>
  #showTable {
    position: relative;
    top: 50px;
  }

  input.el-input__inner {
    width: 300px;
  }

  .el-button {
    width: 150px;
  }

  .el-row {
    margin-top: 50px;
  }

  .el-select {
    width: 400px;
  }
</style>
